<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豪华酒店</title>
    <style>

        .content {
            background: rgba(0, 0, 0, 0.6);
            padding: 30px;
        }
        .content h2 {
            font-size: 48px;
            margin: 0;
        }
        .content p {
            font-size: 18px;
            margin: 10px 0 20px;
        }


        .header {
            background: #fff;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .header h1 {
            margin: 0;
            font-size: 24px;
        }
        .header nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #333;
        }
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: '宋体', serif;
        }
        .container {
            display: flex;
            height: 100%;
        }
        .side {
            flex: 1; /* 占据剩余空间 */
            display: flex; /* 使用 Flexbox 布局 */
            align-items: center; /* 垂直居中对齐内容 */
            justify-content: center; /* 水平居中对齐内容 */
            font-size: 48px; /* 字体大小为 48 像素 */
            color: black; /* 字体颜色为黑色 */
            font-size: 64px; /* 将字体大小调大 */
            color: lightslategrey; /* 设置文字颜色为橙色 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加文本阴影 */
            font-weight: bold; /* 加粗字体 */
            position: relative; /* 使用相对定位 */
            left: -50px; /* 向左偏移 50px */
        }

        .main {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        @keyframes slide {
            0% { transform: translateX(0); }
            25% { transform: translateX(-100%); }
            50% { transform: translateX(-200%); }
            75% { transform: translateX(-300%); }
            100% { transform: translateX(0); }
        }
        .background {
            background-image: url("img/home.jpg");
            background-size: cover;
            background-position: center;
            height: calc(100% - 70px);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
        }
        .form-container {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 40px;
            border-radius: 10px;
            z-index: 4;
            width: 300px;
        }
        .form-container h3 {
            margin: 0 0 20px;
            font-size: 20px;
            color: #333;
        }
        .form-container input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .form-container button {
            width: 100%;
            padding: 10px;
            background-color: #ff9900;
            border: none;
            color: white;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        label{
            color: black;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>Sona.</h1>
    <nav>
        <a href="index.jsp">首页</a>
        <a href="roomviewa.jsp">在线订房</a>
        <a href="#">关于我们</a>
        <a href="#">联系方式</a>
        <a href="login.jsp">系统管理</a>
    </nav>
</div>
<div class="background">
<div class="container">
    <div class="side">
        <div>豪华酒店</div>
    </div>
    <div class="main">
        <div class="content">
            <h2>豪华酒店</h2>
            <p>xxx地酒店</p>
            <c:if test="${order != null}">
                <div class="form-container">
                    <h3>查询结果</h3>
                    <label >${order.order_room_name}</label><br>
                    <label >入住日期：${order.order_start}</label><br>
                    <label >退房日期：${order.order_end}</label><br>
                    <label >是否入住${order.order_ischeck}</label>
                </div>
            </c:if>
            <c:if test="${ order == null}">
                <div class="form-container">
                    <h3>查询结果</h3>
                   <label>无</label>
                </div>
            </c:if>

        </div>

    </div>
</div>
</div>
</body>
</html>
